<template>
  <div class="step" v-if="step">
    <div class="name" :style="{
      background: name_background,
    }" @click="showEdit">
      <div style="display: flex; align-items: center">
        {{ step.FLS_Name }}
        <i v-if="step.IsNew || step.IsModified" class="el-icon-edit"
          style="font-weight: bold; margin-left: 5px; margin-bottom: 2px"></i>
      </div>

      <i v-if="step.FLS_Type != 1 && step.FLS_Type != 2" class="el-icon-delete" size="20" @click.stop="remove"></i>
    </div>
    <div class="body" @click="showEdit">
      <template v-if="step.FLS_Type == 10">
        <div class="item">
          <div class="item-title">抄送人</div>
          <template v-if="step.FOC_Name">
            <div class="item-text">{{ step.FOC_Name }}</div>
          </template>
          <template v-else>
            <div class="item-text-unchoice">请选择抄送人</div>
          </template>
        </div>
      </template>
      <template v-if="step.FLS_Type == 3">
        <div class="item">
          <div class="item-title">审批人</div>
          <template v-if="step.FOC_Name">
            <div class="item-text">{{ step.FOC_Name }}</div>
          </template>
          <template v-else>
            <div class="item-text-unchoice">请选择审批人</div>
          </template>
        </div>
        <div v-if="step.FLS_ChoiceDesc" class="item">
          <div class="item-title">{{ step.FOC_Name }}</div>
          <div class="item-text">{{ step.FLS_ChoiceDesc }}</div>
        </div>
        <div class="item">
          <div class="item-title">审核方式</div>
          <template v-if="step.PassType">
            <div class="item-text">{{ step.PassType }}</div>
          </template>
          <template v-else>
            <div class="item-text-unchoice">请选择审批方式</div>
          </template>
        </div>
        <div class="item" v-if="step.FLS_LimitDays">
          <div class="item-title">审批期限</div>
          <div class="item-text">{{ step.FLS_LimitDays }}天</div>
        </div>
        <div class="item" v-if="step.MultiOpPassType">
          <div class="item-title">多人审批</div>
          <template v-if="step.MultiOpPassType">
            <div class="item-text">{{ step.MultiOpPassType }}</div>
          </template>
          <template v-else>
            <div class="item-text-unchoice">请选择审批方式</div>
          </template>
        </div>
        <div class="item" v-if="step.FLS_CheckOneTime">
          <div class="item-title">自动审核</div>
          <div class="item-text">
            <i class="el-icon-check" style="font-weight: bold"></i>
          </div>
        </div>
        <div class="item" v-if="step.FLS_CreatorAutoCheck">
          <div class="item-title">发起人自动通过</div>
          <div class="item-text">
            <i class="el-icon-check" style="font-weight: bold"></i>
          </div>
        </div>
        <div class="item" v-for="(action, index) in step.Actions" :key="index">
          <div class="item-title">方法{{ index + 1 }}</div>
          <div class="item-text">{{ action.BFA_Name }}</div>
        </div>
        <!-- <div v-if="step.FLS_Score" class="item">
          <div class="item-title">分数</div>
          <div class="item-text">{{ step.FLS_Score }}</div>
        </div> -->
      </template>
      <div class="item" v-for="(project, index) in step.ContributionProjects" :key="index">
        <div class="item-title">贡献项{{ index + 1 }}</div>
        <div class="item-text">
          {{ project.CP_Name }}【权重:{{ project.CP_Weight }}】
        </div>
      </div>
    </div>
    <template v-if="$route.query.test">
      <div>StepId: {{ step.FLS_Guid }}</div>
      <div>NextStepId: {{ step.FLS_NextStepId }}</div>
    </template>

    <el-drawer :visible.sync="editStepVis" title="修改节点" direction="rtl">
      <editFlowStep :editingStep="step" :actions="actions" :business="business"></editFlowStep>
    </el-drawer>
  </div>
</template>
<script>
import editFlowStep from './editFlowStep.vue'
export default {
  components: { editFlowStep },
  props: ['step', 'actions', 'business'],
  data: function () {
    return {
      editStepVis: false,
    }
  },
  methods: {
    showEdit() {
      this.step.IsModified = true
      this.editStepVis = true
    },
    shallowEqual(object1, object2) {
      const keys1 = Object.keys(object1)
      const keys2 = Object.keys(object2)

      if (keys1.length !== keys2.length) {
        return false
      }
      for (let index = 0; index < keys1.length; index++) {
        const val1 = object1[keys1[index]]
        const val2 = object2[keys2[index]]
        if (val1 !== val2) {
          return false
        }
      }
      return true
    },
    remove() {
      if (this.step.FLS_Type == 1 || this.step.FLS_Type == 2) {
        this.$message({
          type: 'warning',
          message: '开始、结束节点不可删除',
        })
        return
      }
      this.$confirm('删除节点？', '注意').then((r) => {
        this.$emit('onRemove')
      })
    },
  },
  computed: {
    name_background() {
      if (!this.step) {
        return 'gray'
      }
      switch (this.step.FLS_Type) {
        case 1: {
          //开始节点
        }
        case 2: {
          //结束节点
          return '#576a95'
        }
        case 3: {
          //审批节点
          return '#ff943e'
        }
        case 10: {
          //抄送节点
          return '#3296fa'
        }
      }
    },
  },
}
</script>
<style scoped>
.step {
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 260px;
  min-height: 72px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}

.step .name {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 11px;
  width: 100%;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  color: #ffffff;
  text-align: left;
  background: #576a95;
  border-radius: 4px 4px 0px 0px;
}

.step .body {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  width: 260px;
  min-height: 80px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  padding: 5px 11px;
  box-sizing: border-box;
}

.step .body .item {
  display: flex;
  line-height: 21px;
  display: flex;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
}

.step .body .item-title {
  color: #333333;
  min-width: 52px;
}

.step .body .item-text {
  color: #0075ff;
  margin-left: 10px;
}

.step .body .item-text-unchoice {
  color: #888;
  margin-left: 10px;
}
</style>